<template>
	<view class="article-list flex-c" :class="{'mt20': marginTop}">
		<view class="article-list-item mb20 flex-c" v-for="(article, index) in articleList" :key="index" @tap="goDetail(article, index)">
			<!-- 浏览时间 -->
			<view class="item-info thinborder text-secondary" v-if="type == 'readlog'">
				<text>浏览时间：</text><uni-dateformat class="date" :date="article.readTime" format="yyyy.MM.dd hh:mm:ss"></uni-dateformat>
			</view>
			<!-- 专家信息 -->
			<template v-if="showHead">
				<view class="item-head flex-r ac" v-if="article.expertId || article.userId">
					<view class="author-image border-round" @tap.stop="$CHS.goExpertHome(article.expertId || article.userId, article.userType || 'expert')">
						<lazy-image class="inheritwh border-round" :src="(article.expertAvatar || article.avatar)+'?imageView2/1/w/100/h/100/q/50'" :type="article.userType || 'expert'" fit="cover"></lazy-image>
						<view class="expert-note" v-if="article.saleArticleNum" :class="{'round': article.saleArticleNum < 10}">
							<text>{{article.saleArticleNum}}</text>
						</view>
					</view>
					<view class="author-info flex-c">
						<view class="info-top flex-r ac">
							<text class="text-secondary text-bold ml20">{{article.expertName || article.nickname}}</text>
							<image class="icon" v-if="article.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
							<text class="tag-red ml20" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
							<text class="tag-gold ml20" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
							<!-- <text class="tag-season" :class="'rank'+article.rankTag" v-if="article.seasonRankTag">{{article.seasonRankTag}}</text> -->
						</view>
						<!-- <text class="tag-season seasonRankTag" :class="'rank'+article.rankTag" v-if="article.seasonRankTag&&type!='readlog'">{{article.seasonRankTag}}</text> -->
						<!-- <text class="tag-matchRed seasonRankTag"  v-if="article.seasonHotContineTxt&&type!='readlog'">{{article.seasonHotContineTxt}}</text> -->
						<text class="text-info color-grey text-artivle" v-if="remark &&article.remark">{{article.remark.split(/[\t\r\f\n\s]*/g).join('')}}</text>
						
					</view>
					<view class="author-result-score flex-c" v-if="type != 'readlog' && Number(article.hitRate)>=60">
						<view class="result-score flex-r">
							<text>{{article.hitRate}}</text>
							<text>%</text>
						</view>
						<text class="result-des color-red">{{article.hitRateName}}</text>
					</view>
				</view>
			</template>
			<!-- 方案主体内容 -->
			<view class="item-body flex-c" :class="{'no-head': !showHead}">
				<view class="item-body-top flex-c jc">
					<view class="flex-c">
						<view class="item-body-info flex-r ac">
							<view class="artitlce-title text-hidden two">
								<image v-if="article.articleType=='2'" class="spfa" src="@/public/images/index/spfa.png" ></image> 
								<text class="text-primary">{{article.title}}</text>
							</view>
							<!-- <view class="card-free" v-if="article.label != '0' && article.finish != 1 && !article.result && (article.endPayTime && new Date(article.endPayTime.replace(/-/g, '/')) > new Date())">
								<image class="inheritwh" src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
								<image class="inheritwh" src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
							</view> -->
							<view class="card-free" v-if="article.label != '0' && article.finish != 1 && !article.result">
								<image class="inheritwh" src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
								<image class="inheritwh" src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
							</view>
						</view>
						<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList" :canTap="type != 'match'" @openArticle="goDetail(article, index)"></ArticleMatch>
					</view>
					<image v-if="type == 'experthome' && article.pay && !article.result" class="unlock-icon" src="@/public/images/expert/yjs-ys.png" mode="aspectFit"></image>
				</view>
				<template v-if="article.articleType=='2'&& showSP">				
					<view class="item-body-video" v-if="article.freeVideoUrl">
						<FullVideo :url="article.freeVideoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
					</view>
					<view class="item-body-video" v-else>
						<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-if="article.sportId == 1"></FullVideo>
						<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-else></FullVideo>
					</view>
				</template>
			</view>
			<!-- 方案其他信息 -->
			<view class="item-foot flex-r ac jsb" :class="{'no-bar': !showBar}">
				<view class="item-foot-info text-info color-grey flex-r ac">
					<template v-if="article.displayTime">
						<uni-dateformat :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
					</template>
					<template v-else>
						<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
					</template>
					<text class="views" v-if="!showBar && article.virtualReadNum">{{article.virtualReadNum}}人查看</text>
				</view>
				<view class="item-foot-type text-info flex-r ac">
					<text class="color-blue" v-if="type == 'supply'">{{article.status == 1 ? '已解锁': '点击解锁' }}</text>
					<text class="color-blue" v-else-if="article.finish == 1 || article.result || (article.endPayTime && new Date(article.endPayTime.replace(/-/g, '/')) < new Date())">查看</text>
					<template v-else-if="article.enablePay === 1">
						<text class="type-info color-red" v-if="article.state != 2">
							{{article.state == 1 ? '不中返还' : article.state == 3 ? '不中补单' : ''}}
						</text>
						<view class="type-price flex-r ac">
							<text class="vip-price" v-if="article.label == '1' && article.avgBeanCard">优享价：{{article.avgBeanCard}}</text>
							<text class="fl-price color-red" v-else-if="article.label == '2'">福利价：{{article.benefitPrice}}</text>
							<text class="color-red" :class="{'delete': article.label == '2' || (article.label == '1' && article.avgBeanCard)}">{{article.payBeanValue}}</text>
							<image src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
						</view>
					</template>
					<text class="color-red" v-else>免费</text>
				</view>
			</view>
			<!-- 球吧信息 -->
			<view class="item-barinfo flex-r ac thinborder-top" v-if="showBar">
				<!-- <view class="info-left flex-r ac" v-if="article.forumId" @tap.stop="$CHS.goBarHome(article.forumId, article.blacklist)">
					<lazy-image class="bar-img border-round" :src="article.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text class="text-info">{{article.forumName}}</text>
				</view> -->
				<view class="info-right flex-r ac">
					<image class="comment-icon" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<text class="text-small">{{article.commentNum || 0}}</text>
					<image class="view-icon" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<text class="text-small">{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
			<!-- 优惠券活动 -->
			<!-- <template v-if="article.enablePay === 1 && article.finish !== 1 && (!article.endPayTime || new Date(article.endPayTime.replace(/-/g, '/')) > new Date())">
				<view class="item-activity flex-r ac jsb thinborder-top" v-if="type != 'supply' && article.label != '2' && user.couponActivity">
					<image class="icon-coupon" src="@/public/images/public/wzyh.png" mode="widthFix"></image>
					<view class="activity-bean flex-r ac">
						<text class="color-white text-info">5折价</text>
						<view class="bg-white color-red flex-r ac">
							<text class="text-small">{{ article.payBeanValue ? Math.ceil(article.payBeanValue * 0.5) : 0}}</text>
							<image class="icon-bean" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</template> -->
			<!-- 方案结果 -->
			<view class="item-icon" :class="type" v-if="article.matchInfoList && showResult && article.result">
				<image :src="require('@/public/images/article/res_'+article.result+(article.result == 1 ? '_'+article.matchInfoList.length : '')+'.png')" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * ArticleList 方案列表
	 * @description 方案列表用于展示专家的方案
	 * @property {Array} list 方案列表数组
	 * @property {String} type = [supply|readlog|memberhome|experthome|match] 列表类型
	 *  @value supply 补单列表
	 *  @value readlog 浏览记录列表
	 *  @value memberhome 用户方案列表
	 *  @value experthome 专家方案列表
	 *  @value match 比赛推荐方案列表
	 * @property {Boolean} showHead = [true|false] 是否展示头部专家信息
	 * @property {Boolean} showResult = [true|false] 是否展示结果
	 * @property {Boolean} showBar = [true|false] 是否展示球吧信息
	 * @property {Boolean} marginTop = [true|false] 是否存在顶部距离
	 * @property {String} relationId 补单列表关联方案ID
	 * @property {Boolean} showSP 是否显示视频料
	 * @property {Boolean} remark 是否显示料的简介remark
	 * @example <ArticleList :list="list" type="readlog"></ArticleList>
	 */
	export default {
		name:"ArticleList",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: String,
				default: ''
			},
			showHead: {
				type: Boolean,
				default: true
			},
			showResult: {
				type: Boolean,
				default: false
			},
			showBar: {
				type: Boolean,
				default: false
			},
			marginTop: {
				type: Boolean,
				default: true
			},
			relationId: {
				type: String,
				default: ''
			},
			showSP:{
				type:Boolean,
				default:true
			},
			remark:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				show: [],
			};
		},
		components: {
			ArticleMatch: () => import("./ch-articlematch.vue"),
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			articleList() {
				return this.list
			}
		},
		methods: {
			/**
			 * @description 展开折叠赛事列表
			 * @param {number} index - 索引
			 */
			showEvent(index) {
				this.$set(this.show, index, !this.show[index])
				return false
			},
			/**
			 * @description 进入详情
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			goDetail(article, index) {
				//监听更新阅读量
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				let id = article.id || article.articleId
				if(this.type == 'supply') {
					this.$CHS.goArticleDetail(id, {rid: this.relationId})
				}else if(this.type == 'memberhome'){
					let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: 'user'}
					this.$CHS.goArticleDetail(id, params)
				}else{
					let params = {type: article.userType}
					this.$CHS.goArticleDetail(id, params)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-list{
		.article-list-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;
			.item-info{
				//box-shadow: 0 1rpx 0 0 #EDEDED;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 20rpx;
			}
			.item-head{
				margin: 30rpx 20rpx 0;
				.author-image{
					position: relative;
					width: 80rpx;
					height: 80rpx;
					background-color: #FFFFFF;
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-top{
						.icon{
							margin-left: 8rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.text-info{
						margin-top: 15rpx;
					}
					.text-artivle{
						width: 420rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.seasonRankTag{
						margin-top: 15rpx;
					}
				}
			}
			.item-body{
				z-index: 2;
				margin: 20rpx 20rpx 0;
				&.no-head{
					margin-top: 30rpx;
				}
				.item-body-top{
					position: relative;
					.unlock-icon{
						align-self: center;
						position: absolute;
						width: 184rpx;
						height: 144rpx;
					}
				}
				.item-body-info{
					margin-bottom: 20rpx;
					position: relative;
					width: 670rpx;
					.artitlce-title{
						width: 670rpx;
						line-height: 42rpx;
						z-index: 2;
						.spfa{
							width: 112rpx;
							height: 32rpx;
							vertical-align: text-bottom;
							margin-top: -4rpx;
							margin-right: 20rpx;
							line-height: 42rpx;
						}
					}
					.card-free{
						position: absolute;
						right: 0;
						width: 83rpx;
						height: 82rpx;
						z-index: 1;
					}
				}
				.item-body-match{
					width: 670rpx;
					position: relative;
					background-color: #F4F8FF;
					border-radius: 4rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					margin-bottom: 20rpx;
					.match-list{
						width: 100%;
						.match{
							padding: 8rpx 0;
							.match-btn{
								height: 32rpx;
								background-color: #D9E5FF;
								border-radius: 4rpx;
								padding: 0 10rpx;
							}
							.match-info{
								max-width: 580rpx;
								margin-left: 10rpx;
								line-height: 32rpx;
							}
							&.border{
								position: relative;
							}
							&.border::before{
								position: absolute;
								top: 0;
								left: 0;
								content: "";
								height: 1px;
								width: 100%;
								background-color: #EDEDED;
								transform: scaleY(0.5);
							}
						}
					}
					.match-result{
						z-index: 1;
						position: absolute;
						right: 0;
						width: 100rpx;
						height: 100rpx;
					}
				}
				.item-body-video{
					margin: 20rpx 0 0;
					width: 670rpx;
					height: 376rpx;
					border-radius: 10rpx;
					.play{
						position: relative;
						image{
							border-radius: 10rpx;
						}
						.btn{
							position: absolute;
							width: 120rpx;
							height: 120rpx;
						}
					}
				}
			}
			.item-foot{
				margin: 20rpx;
				line-height: 24rpx;
				&.no-bar{
					margin-bottom: 30rpx;
				}
				.item-foot-info{
					.views{
						margin-left: 20rpx;
					}
				}
				.item-foot-type{
					.type-info{
						margin-right: 15rpx;
					}
					.type-price{
						image{
							width: 24rpx;
							height: 24rpx;
							margin-left: 15rpx;
						}
						.delete{
							text-decoration:line-through;
						}
						.vip-price{
							color: #99681F;
							margin-right: 15rpx;
						}
						.fl-price{
							margin-right: 18rpx;
						}
					}
				}
			}
			.item-barinfo{
				margin: 0 20rpx;
				padding: 16rpx 0;
				//border-top: 1rpx solid #EDEDED;
				.info-left{
					flex: 1;
					justify-content: flex-start;
					.bar-img{
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
					.text-secondary{
						flex: 2;
					}
				}
				.info-right{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.view-icon{
						margin-left: 40rpx;
					}
				}
			}
			.item-activity{
				margin: 0 20rpx;
				padding: 10rpx 0;
				//border-top: 1rpx solid #ededed;
				.icon-coupon{
					width: 292rpx;
					margin-left: -20rpx;
				}
				.activity-bean{
					height: 40rpx;
					border-radius: 4rpx;
					background-color: #F23030;
					.color-white{
						margin: 0 13rpx;
					}
					.bg-white{
						height: 36rpx;
						margin-right: 2rpx;
						border-radius: 0 4rpx 4rpx 0;
						background-color: #FFFFFF;
						.text-small{
							margin-left: 15rpx;
						}
						.icon-bean{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
			.item-icon{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				&.readlog{
					top: 80rpx;
				}
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>
